<template>
	<view class="signs">
		<view class="signs-header">
			<view class="signs-header-left">
				<image src="/static/sign/signLogo.png" style="width: 180rpx;height: 40rpx;"  mode="scaleToFill" />
                <view class="signs-header-left-text">
                    每天观看直播满足时长即可签到成功
                </view>
                <!-- <button class="signs-header-btn">签到</button> -->
			</view>
		</view>
        <!-- <view class="signs-content flex flex-align">
            <view class="signs-content-left flex flex-align">
                <image src="/static/sign/sign01.png" mode="scaleToFill" />
                <view class="signs-content-left-text">
                   <view class="title">当前红包券</view>
                   <view class="num">528</view>
                </view>
            </view>
            <view class="signs-content-left flex flex-align">
                <image src="/static/sign/sign02.png" mode="scaleToFill" />
                <view class="signs-content-left-text">
                   <view class="title">当前积分</view>
                   <view class="num">528</view>
                </view>
            </view>
        </view> -->
        <view class="signs-content-live">
            <view class="signs-content-live-item">
                <view v-if="timeList&&timeList.length!=0" class="signs-content-live-item-text" v-for="(item,index) in timeList" :key="index">
                   <view class="title">{{item.name}}</view>
                   <!-- <view class="num">58 <text>分</text>41 <text>秒</text></view> -->
                    <view class="num">{{secondsToTime(item.time)}}</view>
                </view>
                <view v-else style="text-align: center;font-size: 32rpx;font-weight: bold;">
                    未签到
                </view>
            </view>
            <view class="signs-content-live-leiji  flex flex-align flex-center">
                您已经累计签到：
                <view class="num">{{total_sign_count}}</view>
            </view>
        </view>
        <view class="signs-content-live-rili">
            <view class="signs-content-live-rili-item">
                <view class="signs-content-live-rili-img">
                    <image src="/static/sign/signTim.png" class="imgLeft" mode="scaleToFill" />
                    <image src="/static/sign/signTim.png" class="imgRight" mode="scaleToFill" />
                </view>
                <uni-calendar class="uni-calendar--hook" :selected="selected" :showMonth="false" :isSelect="true" @change="change" />
            </view>
        </view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import API_USER from "@/api/user";
import { onLoad } from '@dcloudio/uni-app';
import { secondsToTime, toast } from '@/utils';

const selected = ref([]);
const timeList = ref<any>([]);
const total_sign_count = ref(0);
const toDate = () => {
    const date = new Date();
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const monthnew = month < 10 ? '0' + month : month;
    const daynew = day < 10 ? '0' + day : day;
    return `${year}-${monthnew}-${daynew}`
}
onLoad(async () => {
//    获取当前的年月日
  await getSignInfoMonth();
})
const change = (e: any) => {
    if(e.extraInfo){
        timeList.value = e.extraInfo.timeList;
    }else{
        timeList.value = [];
        toast('暂无签到信息');
    }
}

// 签到信息
const getSignInfoMonth = async () => {
  const res = await API_USER.signInfoMonth();
  total_sign_count.value = res.total_sign_count;
  selected.value = res.signList;
  const currentDate = toDate();
  timeList.value = selected.value.find((item: any) =>item.date === currentDate)?.timeList || [];
}

</script>

<style scoped lang="scss">
.signs {
    padding-bottom: 30rpx;
    .signs-header {
        height: 540rpx;padding:60rpx 30rpx 30rpx;box-sizing: border-box;
        background: url('@/static/sign/signBg.png') no-repeat;
        background-size: 100% 100%;
        .signs-header-left-text{
            font-size: 24rpx;
            color: #8292B0;
            margin-top: 10rpx;
        }
        .signs-header-btn{
            width: 180rpx;height: 60rpx;
            background: linear-gradient(to right, #459DFF, #4A3AFF);
            border-radius: 30rpx;
            font-size: 24rpx;
            color: #fff;
            margin-top: 20rpx;margin-left: 0rpx;margin-top: 20rpx;
        }
    }
    .signs-content{
        padding: 30rpx;margin: -60rpx 30rpx 0;
        box-sizing: border-box;
        background: linear-gradient(to right, #459DFF, #4A3AFF);
        border-radius: 30rpx 30rpx 0 0 ;
        margin-top: -150rpx;
        .signs-content-left{
            flex: 1;
            height: 100%;
            image{
                width: 80rpx;height: 80rpx;margin-right: 20rpx;
            }
            .title{
                font-size: 24rpx;
                color: #fff;
                margin-top: 10rpx;opacity: 0.8;
            }
            .num{
                font-size: 40rpx;
                color: #fff;font-weight: bold;
            }
        }
    }
    .signs-content-live{
        // 数据超出横向滚动
        margin-top: -100rpx;
        padding: 30rpx;
        box-sizing: border-box;
        background: #fff;
        border-radius: 30rpx;
        .signs-content-live-item{
            height: 100%; overflow: auto;scroll-behavior: smooth;
            white-space: nowrap;
            image{
                width: 80rpx;height: 80rpx;margin-right: 20rpx;
            }
            .title{
                color: #8292B0;
                margin-top: 10rpx;
            }
            .num{
                font-size: 40rpx;
                color: #323233;font-weight: bold;
                text{
                    font-size: 24rpx;
                    color: #323233;
                    margin-top: 10rpx;opacity: 0.8;
                }
            }
            .signs-content-live-item-text{
                height: 100%;display: inline-block;width: 33%;text-align: center;position: relative;
            }
           .signs-content-live-item-text::after{
            content: '';
            position: absolute;
            top: 50%;transform: translateY(-50%);
            right: 0;
            width: 2px;
            height: 40rpx;
            background-color: #DDE0E5;
           }
           .signs-content-live-item-text:last-child::after{
            display: none;
           }
        }
       
    }
    .signs-content-live-leiji{
        height: 60rpx;width: 500rpx;margin: 0 auto;
        background: #E8F1FF;
        border-radius: 30rpx;color: #323233;
        margin-top: 30rpx;
        .num{
            color: #3B59FF;font-weight: bold;
        }
    }
    .signs-content-live-rili{background: #4590FF;margin: 30rpx;border-radius: 30rpx;padding-top: 30rpx;}   
    .signs-content-live-rili-item{
        min-height:300rpx;background: #fff;border-radius: 30rpx;padding-top: 30rpx;
        .signs-content-live-rili-img{
            position: relative;
            image{width: 60rpx;height: 42rpx;}
            .imgLeft{
                position: absolute;
                top: -50rpx;
                left: 50rpx;
            }
            .imgRight{
                position: absolute;
                top: -50rpx;
                right: 50rpx;
            }
        }
    }
}
:deep() {
    .uni-calendar-item--before-checked,.uni-calendar-item--after-checked {
        background-color: #2979ff;
    }
    .uni-calendar-item__weeks-box-circle {
        background-color: #2979ff;
    }
    .uni-calendar-item--extra{
        color: #2979ff;
    }
    .uni-calendar-item--checked {
        
        .uni-calendar-item__weeks-box-circle{
            background-color: #fff;
        }
        .uni-calendar-item--extra {
            color: #fff;
        }
    }
    .uni-calendar-item--isDay {
        
        .uni-calendar-item__weeks-box-circle{
            background-color: #fff;
        }
        .uni-calendar-item--extra {
            color: #fff;
        }
    }
}
</style>